<page-header></page-header>
<nz-card style="min-height: calc(100vh - 225px)">
  <nz-layout class="inner-layout">
    <nz-sider nzWidth="200px" nzTheme="light">
      <ul nz-menu nzMode="inline" class="sider-menu">
        <li nz-submenu nzOpen nzTitle="宠物种类" nzIcon="user">
          <ul>
            <li nz-menu-item *ngFor="let item of statList" (click)="setType(item.dictKey)">{{ item.dictValue }}</li>
          </ul>
        </li>
      </ul>
    </nz-sider>
    <nz-content class="inner-content ml20">
      <form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
        <div class="row">
          <div class="col-1-4 col-1-4-md">
            <nz-form-item nzFlex>
              <nz-form-label nzFor="name">词名</nz-form-label>
              <nz-form-control class="flex2">
                <input nz-input formControlName="name" />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div style="padding-left: 15px">
            <button nz-button nzType="primary" (click)="search()"><i nz-icon [nzIconfont]="'pets_search'"></i>查询</button>
            <button nz-button nzType="default" (click)="reset()"><i nz-icon [nzIconfont]="'pets_refresh'"></i>重置搜索</button>
            <button nz-button nzType="danger" (click)="add()"><i nz-icon [nzIconfont]="'pets_add'"></i>添加</button>
          </div>
        </div>
      </form>
      <nz-table
        #table
        [nzShowSizeChanger]="true"
        [nzFrontPagination]="false"
        [nzShowTotal]="totalTemplate"
        [nzTotal]="pageInfo.total"
        [(nzPageIndex)]="pageInfo.pi"
        [(nzPageSize)]="pageInfo.ps"
        [nzData]="dataList"
        [nzLoading]="pageInfo.loading"
        (nzPageIndexChange)="load()"
        (nzPageSizeChange)="search()"
        class="small-table fix-table"
      >
        <thead>
          <tr>
            <th nzWidth="100px">序号</th>
            <th nzWidth="auto">词名</th>
            <th nzWidth="auto">种类</th>
            <th nzWidth="auto">描述</th>
            <th nzWidth="180px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="line" *ngFor="let data of table.data; let i = index">
            <td>
              {{ i + 1 + (this.pageInfo.pi - 1) * this.pageInfo.ps }}
            </td>
            <td title="{{ data['name'] }}">{{ data['name'] }}</td>
            <td title="{{ data['animalTypeName'] }}">{{ data['animalTypeName'] }}</td>
            <td title="{{ data['description'] }}">{{ data['description'] }}</td>
            <td>
              <a (click)="edit(data)" title="编辑"><i nz-icon style="font-size: 28px" [nzIconfont]="'pets_edit'"></i></a>
              <nz-divider nzType="vertical"></nz-divider>
              <a
                title="删除"
                class="line-remove"
                nz-popconfirm
                nzPopconfirmTitle="确认删除吗?"
                nzPopconfirmPlacement="top"
                (nzOnConfirm)="remove(data['id'])"
                ><i nz-icon style="font-size: 28px" [nzIconfont]="'pets_shanchu'"></i
              ></a>
            </td>
          </tr>
        </tbody>
        <ng-template #totalTemplate let-total> 共 {{ total }} 条数据</ng-template>
      </nz-table>
    </nz-content>
  </nz-layout>
</nz-card>
